✨ (entity selector) feedback #3501

sophiamersmann · 2024-04-16T13:19:54Z

Small bug fixes and improvements coming out of design review:

(What Marwa said is in quotes)

"The hover effect of the close button is different from the designs"
"The hover effect is missing on the entity rows"
"The “close” button is distorted on mobile"
"It would be nice (but not a must) if after a user scrolls a lot, they can click on the are on top to scroll back to the top of the list"
"I feel like when we have radio buttons, the user needs some kind of feedback that they’ve selected an entity. So instead of closing the modal immediately after selection, it would be good to see it selected."
"I think this was an issue in the past but the viewport does not zoom out after the user is done typing and selecting (i think it should)"
- The only "fix" that I'm aware of is setting the font size to 16px which looks bad, so I guess we'll have to live with this one...
"“Sort by” should be Gray 70"

Not clear how to address:

"The animation is really nice when the user is close to the “selected” list but once they get further, it gets a bot strange… I’m not 100% sure how that could be fixed but it does seem a bit choppy"
- We can't really slow down the item that travels to the top because then it would take forever to get there... but I did try to slow down the items around the selected one, so that it's hopefully a bit more obvious that we just moved it to the top
"It might make sense to have the selection visible at the top of the list. I think it’s a bit weird that we have Germany and Europe that are not in alphabetical order (because of the current location) but then again the actual selection (which is the most important thing to see in this case) is buried somewhere else in the list."
- I tried to make it so that, upon selecting, the previously selected item doesn't get animated and just disappears from the top and reappears in its original position, but that was even weirder than swapping..

To do before merging:

Replace rem with px
~~Show "World" on top with a globe icon~~ (was weird)

sophiamersmann · 2024-04-16T13:20:12Z

✨ (entity selector) feedback #3501 👈
✨ (entity selector) render drawer within the Grapher frame #3500
🔨 (grapher) refactor modals and entity selector #3490
🎉 (entity selector) sort by external indicators #3466 : 1 other dependent PR (#3443 )
🎉 (entity selector) highlight user location #3452
🎉 (entity selector) sort by name or value #3447
✨ (entity selector) redesign #3436
🔨 (grapher) refactor modals #3435
🔨 (grapher) add CloseButton component #3434
✨ (entity selector) render into panel, drawer or modal #3373
✨ (entity selector) remove slide-in settings drawer #3353 : 2 other dependent PRs (#3356 , #3363 )
master

This stack of pull requests is managed by Graphite. Learn more about stacking.

Join @sophiamersmann and the rest of your teammates on Graphite

marcelgerber · 2024-04-18T10:13:13Z

packages/@ourworldindata/grapher/src/entitySelector/EntitySelector.tsx

+            if (this.props.onDismiss) {
+                this.dismissTimer = setTimeout(() => {
+                    if (this.props.onDismiss) this.props.onDismiss()
+                }, 250)


I see Marwa's comment that was suggesting this, but I think this now feels even weirder than it did before.
You can just about glimpse that something is animating, but then it the modal just closes on you without notice, and that feels quite broken.

yeah you're right, I think I implemented this before adding the animation..

In that case, Marwa said to just keep the modal open :)

marcelgerber · 2024-04-18T10:17:00Z

packages/@ourworldindata/grapher/src/entitySelector/EntitySelector.tsx

-                    <div className="footer__selected">
-                        {selectedEntityNames.length > 0 ? (
-                            <>
-                                Current selection:
-                                <span className="entity-name">
-                                    {selectedEntityNames[0]}
-                                </span>
-                            </>
-                        ) : (
-                            "Empty selection"
-                        )}
-                    </div>


Was removing this also due to Marwa's feedback? I felt like it worked quite well.

I also liked it! But Marwa felt that having the local entities on top but the selected one buried in the list was weird (which I can kind of see). And then, if we have the selected entity on top, there is no need to show it in the footer as well.

owidbot · 2024-05-01T17:30:43Z

Quick links (staging server):

Site	Admin	Wizard

Login: ssh owid@staging-site-entity-selector-feedback

Site-screenshots: https://github.com/owid/site-screenshots/compare/entity-selector-feedback
SVG tester: https://github.com/owid/owid-grapher-svgs/compare/entity-selector-feedback

SVG tester:

Number of differences (default views): 1237

Number of differences (all views): 389

Edited: 2024-05-03 08:02:10 UTC
Execution time: 1.16 seconds

sophiamersmann · 2024-05-03T08:04:41Z

Merge activity

May 3, 4:04 AM EDT: @sophiamersmann started a stack merge that includes this pull request via Graphite.
May 3, 4:27 AM EDT: Graphite rebased this pull request as part of a merge.
May 3, 4:28 AM EDT: @sophiamersmann merged this pull request with Graphite.

github-actions bot assigned sophiamersmann Apr 16, 2024

sophiamersmann mentioned this pull request Apr 16, 2024

🔨 (grapher) refactor modals and entity selector #3490

Merged

sophiamersmann mentioned this pull request Apr 16, 2024

✨ (entity selector) render drawer within the Grapher frame #3500

Merged

sophiamersmann force-pushed the entity-selector-drawer branch from 3f1c935 to 58508ee Compare April 16, 2024 16:01

sophiamersmann force-pushed the entity-selector-feedback branch 3 times, most recently from e11f882 to 77143f6 Compare April 16, 2024 16:59

sophiamersmann force-pushed the entity-selector-drawer branch from 58508ee to 6ab8ca9 Compare April 17, 2024 10:35

sophiamersmann force-pushed the entity-selector-feedback branch 3 times, most recently from 36952bb to fc29c1a Compare April 17, 2024 16:16

sophiamersmann mentioned this pull request Apr 17, 2024

Cycle 2024.2: Entity selector #3349

Closed

11 tasks

sophiamersmann marked this pull request as ready for review April 18, 2024 08:02

sophiamersmann force-pushed the entity-selector-drawer branch from 6ab8ca9 to a3b2213 Compare April 18, 2024 08:09

sophiamersmann force-pushed the entity-selector-feedback branch from fc29c1a to 6d85d8d Compare April 18, 2024 08:09

sophiamersmann requested a review from marcelgerber April 18, 2024 08:13

marcelgerber approved these changes Apr 18, 2024

View reviewed changes

sophiamersmann force-pushed the entity-selector-drawer branch from a3b2213 to 16ebb02 Compare April 26, 2024 12:23

sophiamersmann force-pushed the entity-selector-feedback branch from 6d85d8d to c7553fc Compare April 26, 2024 12:23

sophiamersmann force-pushed the entity-selector-drawer branch from 16ebb02 to f4672f3 Compare April 26, 2024 17:04

sophiamersmann force-pushed the entity-selector-feedback branch from c7553fc to b4f1190 Compare April 26, 2024 17:04

sophiamersmann force-pushed the entity-selector-drawer branch from f4672f3 to b02c8f4 Compare May 1, 2024 13:07

sophiamersmann force-pushed the entity-selector-feedback branch from b4f1190 to 284ae76 Compare May 1, 2024 13:07

sophiamersmann force-pushed the entity-selector-feedback branch 5 times, most recently from ce4d61a to ce84260 Compare May 2, 2024 08:58

sophiamersmann force-pushed the entity-selector-feedback branch 3 times, most recently from 3d2fa21 to d4e8a62 Compare May 2, 2024 13:40

sophiamersmann force-pushed the entity-selector-drawer branch from b02c8f4 to bef0398 Compare May 2, 2024 14:03

sophiamersmann force-pushed the entity-selector-feedback branch 3 times, most recently from 6bdfd0e to 17e00e3 Compare May 3, 2024 07:52

sophiamersmann force-pushed the entity-selector-drawer branch from bef0398 to 2dda98c Compare May 3, 2024 08:25

Base automatically changed from entity-selector-drawer to master May 3, 2024 08:26

✨ (entity selector) design feedback

b1d96e1

sophiamersmann force-pushed the entity-selector-feedback branch from 17e00e3 to b1d96e1 Compare May 3, 2024 08:27

sophiamersmann merged commit c9a9bd8 into master May 3, 2024
11 of 17 checks passed

sophiamersmann deleted the entity-selector-feedback branch May 3, 2024 08:28

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

✨ (entity selector) feedback #3501

✨ (entity selector) feedback #3501

sophiamersmann commented Apr 16, 2024 •

edited

Loading

sophiamersmann commented Apr 16, 2024 •

edited

Loading

marcelgerber Apr 18, 2024

sophiamersmann Apr 18, 2024

marcelgerber Apr 18, 2024

sophiamersmann Apr 18, 2024

owidbot commented May 1, 2024 •

edited

Loading

sophiamersmann commented May 3, 2024 •

edited

Loading

✨ (entity selector) feedback #3501

✨ (entity selector) feedback #3501

Conversation

sophiamersmann commented Apr 16, 2024 • edited Loading

sophiamersmann commented Apr 16, 2024 • edited Loading

marcelgerber Apr 18, 2024

Choose a reason for hiding this comment

sophiamersmann Apr 18, 2024

Choose a reason for hiding this comment

marcelgerber Apr 18, 2024

Choose a reason for hiding this comment

sophiamersmann Apr 18, 2024

Choose a reason for hiding this comment

owidbot commented May 1, 2024 • edited Loading

sophiamersmann commented May 3, 2024 • edited Loading

Merge activity

sophiamersmann commented Apr 16, 2024 •

edited

Loading

sophiamersmann commented Apr 16, 2024 •

edited

Loading

owidbot commented May 1, 2024 •

edited

Loading

sophiamersmann commented May 3, 2024 •

edited

Loading